<template>
	<view>
		<view class="search-Bar">
				   <uni-search-bar cancelButton="none" :radius="100" @input="input($event)"></uni-search-bar>
		</view>
        <view class="search-show" v-if="searchList.length!==0">
			<view class="Outside" >
				<view class="showdata" v-for="(item,i) in searchList" :key="i" @click="passId(item)">
					<view>
						{{item.goods_name}}
					</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>
       <view class="history" v-else>
		   <view class="history-top">
			   <text>搜索记录</text>
			   <uni-icons type="trash" @click="trashClick"></uni-icons>
		   </view>
		   <view class="history-bottom">
			      <uni-tag :text="item" @click="passShop(item)" class="uni-text" v-for="(item,i) in historys" :key="i" ></uni-tag>
		   </view>
		
	   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:null,
				searchList:[],
				value:"",
				historyData:[],
				historys:[]
			
			};
		},
		methods:{
			input(e){
			
				clearTimeout(this.time)
		       this.time=setTimeout(()=>{
				  this.value=e.value	
				  this.getSearchData()
			},700)
			
			},
			async getSearchData(){
				if(this.value!==""){
					const {data:res} =await uni.$http.get("/api/public/v1/goods/qsearch",{query:this.value})
				
					if(res.meta.status!==200)return uni.$showMsg()
					this.searchList=res.message
			this.StoreLocal()
				}else{
					this.searchList=""
				}
				
			},
			passId(item){
				uni.navigateTo({
					url:"/subpkg/goods_detail/goods_detail?goods_id="+item.goods_id
				})
			},
			StoreLocal(){
				this.historyData.push(this.value)
				this.historys= [...new Set([...this.historyData].reverse())]
						uni.setStorageSync("key",this.historys)
			},
			trashClick(){
				this.historys=[]
				uni.removeStorageSync("key")
			},
			passShop(item){
				console.log(item)
				uni.navigateTo({
					url:"/subpkg/goods_list/goods_list?query="+item
				})
			}
		 			
		},
		onLoad(){
			this.historys=uni.getStorageSync("key")
		}

	}
</script>

<style lang="scss">
    .search-Bar{
		position:sticky;
		z-index:999;
		top:0;
		height:120rpx;
		background-color:#c00000;
	}
	.Outside{
		padding:0 3px;
	}
		.showdata{
			display:flex;
			align-items: center;
			justify-content: space-between;
			border-bottom:1px solid #efefef;
			padding:13px 0;
			font-size:12px;
			view{
				 text-overflow:ellipsis;
				 white-space:nowrap;
				 overflow:hidden;
				 margin-right:3px;
			}
		}
		.history{
			.history-top{
				display: flex;
				justify-content:space-between;
				font-size:12px;
				height:80rpx;
				align-items:center;
				border-bottom:1px solid #efefef;
				
				text{
					padding:0 10rpx;
				}
			}
			.history-bottom{	
				display:flex;
				flex-wrap:wrap;
				.uni-text{
					margin-left:5px;
					margin-top:5px;
				}
			}
			
		}
	
</style>
